<template>
	<view class="xh-desc-item">
		<view
			class="label"
			:style="{ width: labelWidth + 'px' }"
			>{{ label }}</view
		>
		<view class="label-data">
			<text
				class="text"
				v-if="text"
				>{{ text }}</text
			>
			<template v-else>
				<slot>-</slot>
			</template>
		</view>
	</view>
</template>
<script>
export default {
	props: {
		label: {
			type: String,
			default: 'label',
		},
		text: {
			type: [String, undefined, Number],
			default: undefined,
		},
		labelWidth: {
			type: Number,
			default: 80,
		},
	},
};
</script>
<style lang="scss" scoped>
.xh-desc-item {
	display: flex;
	align-items: baseline;
	view {
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 14px;
		padding: 0 12px 0 0;
		height: 36px;
	}
	.label {
		color: #606266;
		justify-content: flex-end;
	}
	.label-data {
		color: #333;
	}
}
</style>
